<template>
  <!--
    时间：2023年10月22日 21点08分
    座右铭组件的开发
  -->

  <div id="motto">
    <div class="motto_box">
      <h3 class="word1">{{ props.word1 }}</h3>
      <h3 class="word2">{{ props.word2 }}</h3>
<!--      时间是一个伟大的作者，她必将给每一个人都写出完美的结局-->
    </div>

  </div>
</template>
<script setup lang="ts">
import {defineProps} from 'vue';
  const props=defineProps<{
    word1?:string,
    word2?:string,
  }>();
</script>
<style scoped>
#motto{
  position: relative;
  height: 240px;
  width: 100%;
  overflow: hidden;
}
.motto_box{
  position: relative;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 1000px;

}
.motto_box h3{
  font-size: 32px;
  font-family: '宋体';
  line-height: 60px;
  color: #110C1F;
}
.word2{
  text-indent: 4em;
}
.word2::after{
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background-image: url("../assets/image/hehua.png");
  background-size: 100% auto;
  background-position: center;
  background-repeat: no-repeat;
}
</style>
